<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,  initial-scale=1.0">
<title>发布文章</title>
<script type="text/javascript"  src="${pageContext.request.contextPath }/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript"  src="${pageContext.request.contextPath }/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/bootstrap.css">
	<link rel="stylesheet"  href="${pageContext.request.contextPath }/resource/kindeditor/themes/default/default.css" />
    <link rel="stylesheet"  href="${pageContext.request.contextPath }/resource/kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8"  src="${pageContext.request.contextPath }/resource/kindeditor/kindeditor.js"></script>
    <script charset="utf-8"  src="${pageContext.request.contextPath }/resource/kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8"  src="${pageContext.request.contextPath }/resource/kindeditor/plugins/code/prettify.js"></script>
    <script>
           KindEditor.ready(function(K) {
                window.editor1 =  K.create('textarea[name="content1"]', {
                      cssPath :  '/resource/kindeditor/plugins/code/prettify.css',
                      uploadJson :  '/resource/kindeditor/jsp/upload_json.jsp',
                      fileManagerJson :  '/resource/kindeditor/jsp/file_manager_json.jsp',
                      allowFileManager : true,
					  afterCreate : function() {
                           var self = this;
                           K.ctrl(document, 13, function() {
                                 self.sync();
                                 document.forms['example'].submit();
                           });
                           K.ctrl(self.edit.doc, 13, function() {
                                 self.sync();
                                 document.forms['example'].submit();
                           });
                      }
                });
                prettyPrint();
           });
    </script>
</head>
<body>
	
	 <!-- 富文本编译器使用 -->
	 <%=htmlData%>
     <div class="container">
           <form action="publish" method="post">
                  <div class="form-group">
                    <label for="title">文章标题</label>
                    <input type="text" class="form-control"  name="title" id="title" placeholder="请输入标题...">
                  </div>
                  
                  <div class="form-group">
                    <label for="picture">文章标题图片</label>
                    <input type="file" class="form-control"  name="file" id="picture" placeholder="请选择标题图片...">
                  </div>
                  
                  <div class="form-group">
                    <label for="channelId">所属栏目</label>
                    <select class="form-control" id="channelId"  name="channelId" onchange="change(this.value)">
                      <option>请选择</option>
                    </select>
                    
                    <label for="categoryId">所属分类</label>
                    <select class="form-control" id="categoryId"  name="categoryId">
                      <option>请选择</option>
                    </select>
                  </div>
                   
                   <!-- 富文本编辑器 -->
                   <textarea id="content" name="content1"  cols="100" rows="8"  style="width:700px;height:200px;visibility:hidden;">
                   <%=htmlspecialchars(htmlData)%>
                   </textarea>
                
                 <input type="button" class="btn btn-success"  onclick="publish()" value="发布">
           </form>
     </div>
	
</body>

<script type="text/javascript">
//文档就绪函数
$(function(){
      //获取所有的栏目数据
      $.post(
           "${pageContext.request.contextPath }/my/getChannels",
           function(channels){
                 //直接赋值
                 for ( var i in channels) {
                      //追加到下拉框中
                      $("#channelId").append("<option  value='"+channels[i].id+"'>"+channels[i].name+"</option>");
                 }
           }
      )
})


//改变栏目数据时，修改分类数据
function change(id){
      //进行判断
      
      //清除数据
      $("#categoryId").html("<option>请选择</option>");
      
      //如果不为请选择，则查询数据库，否则显示请选择
      if(id != '请选择'){
           
           //调用ajax查询分类数据
           $.post(
                 "${pageContext.request.contextPath }/my/getCategoryByChannelId",
                 {channelId:id},
                 function(categories){
                      //直接赋值
                      for ( var i in categories) {
                            //追加到下拉框中
                            $("#categoryId").append("<option  value='"+categories[i].id+"'>"+categories[i].name+"</option>");
                      }
                 }
           )
           
      }
}

//发布文章
function publish(){
      //获取form表单数据
      var formData = new FormData($("form")[0]);
      
      //获取富文本编辑器数据
      formData.set("content",editor1.html());
      
      //使用ajax进行发布文章
      $.ajax({
           url:"${pageContext.request.contextPath }/my/publish",
           data:formData,
           type: "post",
           processData: false,//用于对data参数进行序列化处理  这里必须false
           contentType: false, //必须*/
           success: function(flag){
                 if(flag){
                      alert("发布成功");
                      //跳转到个人中心首页
                      location="/my";
                      
                 }else{
                      alert("发布失败");
                 }
           }
      })
}
</script>
</html>
<%!
private String htmlspecialchars(String str) {
    str = str.replaceAll("&", "&amp;");
    str = str.replaceAll("<", "&lt;");
    str = str.replaceAll(">", "&gt;");
    str = str.replaceAll("\"", "&quot;");
    return str;
}
%>